@model Material.Mvc.Models.ChatViewModel
@{ ViewData["Title"] = "智能客服系统"; }

<!-- 自定义样式 -->
<style>
    /* 整体布局样式 */
    body {
        background-color: #f8f9fa;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    /* 聊天容器样式 */
    .chat-container {
        max-width: 1280px;
        margin: 2.5rem auto;
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
        border-radius: 14px;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        background-color: #ffffff;
        border: 1px solid #e9ecef;
    }

    .chat-container:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    }

    /* 聊天头部样式 */
    .chat-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 1.5rem;
        position: relative;
        overflow: hidden;
    }

    .chat-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.1"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
    }

    .chat-header h4 {
        margin: 0;
        position: relative;
        z-index: 1;
        font-weight: 600;
    }

    /* 聊天历史样式 */
    .chat-history {
        height: 58vh;
        overflow-y: auto;
        padding: 2rem;
        background-color: #f5f5f5;
        background-image: 
            radial-gradient(#dddddd 1px, transparent 1px),
            radial-gradient(#dddddd 1px, transparent 1px);
        background-size: 45px 45px;
        background-position: 0 0, 22px 22px;
    }

    /* 空聊天提示 */
    .empty-chat {
        text-align: center;
        padding: 4rem 2rem;
        color: #6c757d;
    }

    .empty-chat-icon {
        font-size: 4rem;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    /* 消息气泡样式 */
    .message-wrapper {
        margin-bottom: 1.5rem;
        animation: fadeIn 0.3s ease;
    }

    @@keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .user-message {
        justify-content: flex-end;
    }

    .assistant-message {
        justify-content: flex-start;
    }

    .message-content {
        max-width: 78%;
    }

    .message-header {
        display: flex;
        align-items: center;
        margin-bottom: 0.5rem;
        font-size: 0.85rem;
    }

    .message-role {
        font-weight: 600;
    }

    .message-time {
        margin-left: 0.5rem;
        color: #6c757d;
    }

    .message-bubble {
        padding: 1.1rem 1.35rem;
        border-radius: 18px;
        line-height: 1.65;
        word-wrap: break-word;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s ease;
        font-size: 1rem;
    }

    .message-bubble:hover {
        transform: translateY(-2px);
    }

    .user-bubble {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-bottom-right-radius: 5px;
    }

    .assistant-bubble {
        background-color: white;
        color: #333;
        border-bottom-left-radius: 5px;
    }

    /* 输入区域样式 */
    .input-area {
        padding: 1.5rem;
        background-color: white;
        border-top: 1px solid #e9ecef;
        position: sticky;
        bottom: 0;
        z-index: 10;
        box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.03);
    }

    .message-input {
        border-radius: 28px;
        border: 2px solid #e9ecef;
        padding: 0.9rem 1.35rem;
        resize: none;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .message-input:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .send-button {
        border-radius: 28px;
        padding: 0 2.4rem;
        font-weight: 600;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        color: white;
        transition: all 0.3s ease;
        font-size: 1rem;
    }

    .send-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }

    .send-button:disabled {
        transform: none;
        opacity: 0.7;
        box-shadow: none;
    }

    /* 操作按钮样式 */
    .action-buttons {
        padding: 1rem 1.5rem;
        text-align: center;
        background-color: white;
        border-top: 1px solid #e9ecef;
    }

    .clear-button {
        border-radius: 25px;
        padding: 0.5rem 1.5rem;
        font-weight: 500;
        transition: all 0.3s ease;
    }

    .clear-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    /* 页脚样式 */
    .chat-footer {
        background-color: #f8f9fa;
        padding: 1rem;
        text-align: center;
        font-size: 0.85rem;
        color: #6c757d;
        border-top: 1px solid #e9ecef;
    }

    /* 滚动条样式 */
    .chat-history::-webkit-scrollbar {
        width: 6px;
    }

    .chat-history::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .chat-history::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
    }

    .chat-history::-webkit-scrollbar-thumb:hover {
        background: #a1a1a1;
    }

    /* 响应式设计 */
    @@media (max-width: 768px) {
        .chat-container {
            margin: 0;
            border-radius: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .chat-history {
            flex: 1;
            height: auto;
            padding: 1rem;
        }

        .message-content {
            max-width: 92%;
        }
    }
</style>

<div class="container flex-grow-1 d-flex flex-column">
    <div class="chat-container flex-grow-1 d-flex flex-column">
        <!-- 聊天头部 -->
        <div class="chat-header">
            <h4><i class="bi bi-robot" style="margin-right: .5rem;"></i>智能客服系统</h4>
        </div>

        <!-- 错误提示 -->
        @if (TempData["ErrorMessage"] != null)
        {
            <div class="alert alert-danger alert-dismissible fade show m-3" role="alert">
                <i class="bi bi-exclamation-circle mr-2"></i>
                @TempData["ErrorMessage"]
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        }

        <!-- 聊天历史记录区域 -->
        <div id="chatHistory" class="chat-history flex-grow-1">
            @if (Model.ChatHistory.Count == 0)
            {
                <div class="empty-chat">
                    <div class="empty-chat-icon">
                        <i class="bi bi-chat-dots"></i>
                    </div>
                    <h5 class="mb-2">欢迎使用智能客服系统</h5>
                    <p>我是您的智能助手，有什么问题可以随时问我！</p>
                </div>
            }
            else
            {
                foreach (var message in Model.ChatHistory)
                {
                    <div class="message-wrapper d-flex @(message.Role == "user" ? "user-message" : "assistant-message")">
                        <div class="message-content">
                            <div class="message-header">
                                <span class="message-role @(message.Role == "user" ? "text-primary" : "text-secondary")">
                                    @(message.Role == "user" ? "您" : "智能客服")
                                </span>
                                <span class="message-time">
                                    @message.Timestamp.ToString("HH:mm:ss")
                                </span>
                            </div>
                            <div class="message-bubble @(message.Role == "user" ? "user-bubble" : "assistant-bubble")">
                                @message.Content
                            </div>
                        </div>
                    </div>
                }
            }
        </div>

        <!-- 发送消息表单 -->
        <div class="input-area">
            <form asp-action="SendMessage" method="post" class="d-flex gap-3">
                <textarea asp-for="Message" class="message-input flex-grow-1" rows="3" placeholder="请输入您的问题..." required></textarea>
                <button type="submit" class="send-button align-self-end">发送</button>
            </form>
        </div>

        <!-- 操作按钮 -->
        <div class="action-buttons">
            <form asp-action="ClearHistory" method="post" onsubmit="return confirm('确定要清除所有聊天历史吗？');">
                <button type="submit" class="clear-button btn btn-secondary">清除聊天历史</button>
            </form>
        </div>

        <!-- 页脚 -->
        <div class="chat-footer">
            <p>基于LangChain和OpenAI开发的智能客服系统</p>
        </div>
    </div>
</div>

@section Scripts {
    <!-- 引入Bootstrap图标 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    
    <script>
        // 页面加载完成后，自动滚动到底部
        document.addEventListener('DOMContentLoaded', function() {
            const chatHistory = document.getElementById('chatHistory');
            if (chatHistory) {
                // 添加平滑滚动效果
                chatHistory.scrollTo({
                    top: chatHistory.scrollHeight,
                    behavior: 'smooth'
                });
            }
        });

        // 安全地添加表单提交事件监听器
        const sendMessageForm = document.querySelector('form[asp-action="SendMessage"]');
        if (sendMessageForm) {
            sendMessageForm.addEventListener('submit', function() {
                // 显示加载状态
                const submitButton = this.querySelector('button[type="submit"]');
                const originalText = submitButton.innerHTML;
                submitButton.disabled = true;
                submitButton.innerHTML = '<i class="bi bi-arrow-right"></i> 发送中...';
                
                // 输入框动画效果
                const messageInput = this.querySelector('textarea');
                if (messageInput) {
                    messageInput.style.opacity = '0.7';
                    messageInput.disabled = true;
                }
                
                // 在提交前添加一个短暂的延迟，确保用户体验
                setTimeout(function() {
                    // 滚动到底部
                    const chatHistory = document.getElementById('chatHistory');
                    if (chatHistory) {
                        chatHistory.scrollTo({
                            top: chatHistory.scrollHeight,
                            behavior: 'smooth'
                        });
                    }
                    
                    // 虽然页面会刷新，但这里添加恢复逻辑以防万一
                    if (submitButton) {
                        submitButton.disabled = false;
                        submitButton.innerHTML = originalText;
                    }
                    
                    if (messageInput) {
                        messageInput.style.opacity = '1';
                        messageInput.disabled = false;
                    }
                }, 300);
            });
        }
    </script>
}